<template>
  <div  id="PersonalBack" class="flex">

   <!-- 背景图片 -->
    <div class="BackColor" v-if="BackImage && PersonalData">
         <!-- <img :src="require('@/assets/default/background/'+BackImage.src)"  class="BackImage" v-if="BackImage.type==1">
         <img  :src="BackImage.src" class="BackImage" v-else/> -->
      </div>
    
    <div id="Personal" class="flex" v-if="PersonalData">
        
       <!-- 头部 -->
        <PersonalHead  id="PersonalHead" class="flex"/>
        
         <!-- 电脑导航 -->
         <div  id="PersonalNaviBox">
           <PersonalNavi  id="PersonalNavi" />
         </div>
         
       


        <div id="PersonalContent" >
             <!-- 数据状态 -->
             <!-- 1:加载中 2:正常的搜索结果  3:空数据  4:网络问题或者其他问题 -->
             <PersonalState  class="content flex" id="PersonalState" v-if="DataState!=2"/>

             <PersonalArticle  class="content"/>
             
             <!-- 分页器 -->
            <Pagination id="Pagination" v-if=" DataInfo.total > DataInfo.pageSize" :activeStyle="activeStyle"  :PageInfo="DataInfo" :changePage="changePage" />
          
        </div>
    </div>
    <!-- 修改用户信息窗口 -->
    <EditInformation  v-if="EditInformationState"/>
     <!-- 修改用户密码窗口 -->
    <EditPassword v-if="EditPasswordState" />
      
    <!-- 用户浏览窗口 -->
    <Browse v-if="BrowseState"/>

    <!-- 用户申请窗口 -->
    <ApplyFriend v-if="ApplyFriendState"/>
     <!-- 搜索文章窗口 -->
    <SearchArticle v-if="SearchArticleState"/>

    <!-- 设置 -->
    <SpaceSet v-if="SpaceSetState"/>


  </div>
</template>
<script>
import PersonalNavi from './PersonalNavi/PersonalNavi.vue'
import {mapState,mapActions, mapMutations} from 'vuex'
import PersonalHead from './PersonalHead/PersonalHead.vue'
import PersonalState from './PersonalState/PersonalState.vue'
import PersonalArticle from './PersonalArticle/PersonalArticle.vue'
import EditInformation from './PersonalFunction/EditInformation.vue'
import Browse from './PersonalFunction/Browse/Browse.vue'
import ApplyFriend from './PersonalFunction/ApplyFriend.vue'
import Pagination from '@/components/Package/Pagination/Pagination.vue'
import GlobalCardBox from '@/components/Package/GlobalCardBox/GlobalCardBox.vue'
import SpaceSet from './PersonalFunction/SpaceSet/SpaceSet.vue'
import EditPassword from './PersonalFunction/EditPassword.vue'
import SearchArticle from './PersonalFunction/SearchArticle.vue'
import RecycleBin from './PersonalFunction/RecycleBin.vue'

export default 
  {
    components: { PersonalNavi, PersonalHead, PersonalState, PersonalArticle, EditInformation, Browse, ApplyFriend, Pagination, GlobalCardBox, SpaceSet, EditPassword, SearchArticle, RecycleBin},
     name :'', 
     data() {
      return {
         //分页器的整体样式
         activeStyle: {'--activeBackColor':'var(--GeneralBackColor-half)'}
      }
     },
     computed:{
           // 导航index 获取的数据 用户主页信息
          ...mapState('Personal',['NaviIndex','DataState','PersonalData','DataInfo']),
           //  修改用户信息窗口 修改密码信息窗口 浏览窗口 申请好友 空间 
           ...mapState('Personal',['EditInformationState','EditPasswordState','BrowseState','ApplyFriendState','SpaceSetState']),
           ...mapState('Personal',['SearchArticleState','RecycleBinState']),
          ...mapState('Setting',['BackImage']), //背景图片
          ...mapState('Login',['User']), //用户信息
     },
     methods:{
          ...mapActions('Personal',['getArticle','getPersonalData']),
          ...mapMutations('Tool',['NOTICEON']),
           ...mapMutations('Tool',['SETNAVIGATION']), // 展示导航

              //分页
         async  changePage(newPageno){      
            this.DataInfo.pageNo=newPageno
            if(newPageno<=0) newPageno =1
             await  this.getArticle({uid:this.PersonalData.uid});
         }

     },
    watch:{
       PersonalData:{
         immediate:true,
          handler(newValue){
            if(newValue ==null) return this.NOTICEON({message:'非法进入',type:'warn',title:'错误'})
            this.getArticle({uid:newValue.uid})
         }
       }
      
    }
  
}
</script>
<style scoped lang='less'>
*{
    --PersonalBackColor:var(--GeneralBackColor);
}


#PersonalBack{
    z-index: 999;
    width:  calc(100vw );
    margin-top: 60px;
    height: calc( 100vh - 60px);
    overflow: hidden;  
    .BackColor{
          width: 80%;
          height: 90%;
          min-width: 350px;
          overflow: hidden;  
          border-radius: 25px;
          box-shadow: 0 0 15px var(--GeneralBackColor);
          background: rgba(0, 0, 0, 0.3);
          overflow: hidden;
    }
}
#Personal{
    width: 80%;
    height: 90%;
    min-width: 350px;
    overflow: auto;
    border-radius: 25px;
    position: relative;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px;
    padding-top: 0;
    box-sizing: border-box;
}

 /* 平板或手机 */
 @media screen and (max-width: 1000px){

   div#PersonalNaviBox{
        width: 100%;
        max-width:100%;
        height: auto;
    }
    div#PersonalContent{
      width: 100%;
      max-width: 100%;
      height: calc(100% - 390px );
      min-height: 90vh;
    }
 }

// 头部
 #PersonalHead{
    width: 100%;
    height: 70px;
    justify-content: space-between;
    flex-wrap: nowrap;
    margin-bottom: 10px;
 }
// 导航
#PersonalNaviBox{
     width:  20%;
     height:  calc(100% - 80px);
     max-width: 250px;
     min-width: 200px;

     #PersonalNavi{
          width: 100%;
          height: 100%;
          padding-top: 0;
     }
   
}
// 内容
#PersonalContent{
   
   min-width: calc( 100% - 270px);
   max-width: calc(100% - 220px);
   width: calc(80% - 20px);
   height:  calc(100% - 80px);
   background: var(--PersonalBackColor);
   border-radius: 15px;
   overflow: hidden;
   position: relative;

   .content{
      width: 100%;
      height: 100%;
      padding: 50px;
      box-sizing: border-box;
      overflow: auto;
   }

   #Pagination{
      margin-top: 20px;
      position: absolute;
      bottom: 10px;
   }  

}
</style>